<template>
  <div style="text-align: right">
    <el-button size="large" @click="isAdd=true" style="margin-bottom: 1%;margin-right: 1%">
      添加员工
    </el-button>
    <el-input
        v-model="searchValue"
        placeholder="输入姓名或工号"
        :prefix-icon="Search"
        style="max-width: 20vw;margin-bottom: 1%"
        size="large"
    />
  </div>
  <el-table :data="search(employeeList)"
            height="78vh"
            style="width: 100%;"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ textAlign: 'center' }"
  >
    <el-table-column label="姓名/工号" width="250">
      <template #default="scope">
        <el-row><el-text>{{ scope.row.name }}</el-text></el-row>
        <el-row><el-text size="small">工号：{{ scope.row.id }}</el-text></el-row>
      </template>
    </el-table-column>
    <el-table-column prop="tel" label="联系方式" />
    <el-table-column label="权限">
      <template #default="scope">
        <el-tag type="info" v-for="auth in authMap[scope.row.auth]" :key="auth">{{ auth }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button round @click="showEdit(scope.row)">编辑</el-button>
        <el-button type="danger" round @click="showDel(scope.row)">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="isEdit" title="员工信息" width="30%">
    <el-form>
      <el-form-item label="姓名" label-width="100px" >
            <el-input v-model="employeeTemp.name" style="max-width: 150px" />
      </el-form-item>
      <el-form-item label="联系方式" label-width="100px" >
        <el-input v-model="employeeTemp.tel" style="max-width: 150px" />
      </el-form-item>
      <div>
        <el-row>
          <el-col :span="12">
            <el-text size="large">权限</el-text>
          </el-col>
          <el-col :span="12">
            <el-button type="warning" v-if="employeeTemp.auth===0" @click="employeeTemp.auth=1">取消管理员权限</el-button>
            <el-button type="success" v-else @click="employeeTemp.auth=0,checkedData=['仓管','收银']">授予管理员权限</el-button>
          </el-col>
        </el-row>
        <el-checkbox-group v-model="checkedData" @change="checkboxChange" size="large">
          <el-row>
            <el-checkbox size="large" label="仓管"/>
            <el-checkbox size="large" label="收银"/>
          </el-row>
        </el-checkbox-group>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="updateEmployee">
        确定
      </el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="isAdd" title="添加员工" width="30%">
    <el-form>
      <el-form-item label="姓名" label-width="100px" >
        <el-input v-model="addEmployeeTemp.name" style="max-width: 150px" />
      </el-form-item>
      <el-form-item label="联系方式" label-width="100px" >
        <el-input v-model="addEmployeeTemp.tel" style="max-width: 150px" />
      </el-form-item>
      <div>
        <el-row>
          <el-col :span="12">
            <el-text size="large">权限</el-text>
          </el-col>
          <el-col :span="12">
            <el-button type="warning" v-if="addEmployeeTemp.auth===0" @click="addEmployeeTemp.auth=1">取消管理员权限</el-button>
            <el-button type="success" v-else @click="addEmployeeTemp.auth=0,addCheckedData=['仓管','收银']">授予管理员权限</el-button>
          </el-col>
        </el-row>
        <el-checkbox-group v-model="addCheckedData" @change="addCheckboxChange" size="large">
          <el-row>
            <el-checkbox size="large" label="仓管"/>
            <el-checkbox size="large" label="收银"/>
          </el-row>
        </el-checkbox-group>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="addEmployee">
        确定
      </el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="showIdAndPwd" title="请保存好账号和密码" width="20%">
    <div style="text-align: center">
      账号：{{addEmployeeTemp.id}}<br/>
      密码：{{addEmployeeTemp.password}}
    </div>
    <template #footer>
      <el-button @click="addOK">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  Search,
} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import request from "@/utils/request";
import {store} from "@/store";
import {ElMessage, ElMessageBox} from "element-plus";

const employeeList=ref([])
const searchValue=ref("")
const authMap={
  0:["管理员"],
  1:["收银员","仓管员"],
  2:["仓管员"],
  3:["收银员"]
}
let isEdit=ref(false)
let employeeTemp=ref({})
let addEmployeeTemp=ref({})
const checkedData=ref([])
const addCheckedData=ref([])
let isAdd=ref(false)
let showIdAndPwd=ref(false)
onMounted(()=>{
  request.get("/store/get/employee/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
    employeeList.value=res.data.sort(function (a, b) {
      return a.auth-b.auth
    })
  })
})
const search = (list) => {
  return list.filter((p)=>{
    return p.name.indexOf(searchValue.value) !==-1 || p.id.indexOf(searchValue.value) !==-1
  })
}
const showEdit = (data) => {
  employeeTemp.value=JSON.parse(JSON.stringify(data))
  if (employeeTemp.value.auth===2)
    checkedData.value=["仓管"]
  else if (employeeTemp.value.auth===3)
    checkedData.value=["收银"]
  else
    checkedData.value=["仓管","收银"]
  isEdit.value=true
}
const checkboxChange=(e)=>{
  if (e.length===2)
    employeeTemp.value.auth=1
  else{
    if (e[0]==="仓管")
      employeeTemp.value.auth=2
    else
      employeeTemp.value.auth=3
  }
}
const addCheckboxChange=(e)=>{
  if (e.length===2)
    addEmployeeTemp.value.auth=1
  else{
    if (e[0]==="仓管")
      addEmployeeTemp.value.auth=2
    else if(e[0]==="收银")
      addEmployeeTemp.value.auth=3
    else if (e.length===0)
      addEmployeeTemp.value.auth=4
  }
}
const updateEmployee = () => {
  if (addEmployeeTemp.value.auth===4){
    ElMessage({
      message: '至少要一条权限',
      type: 'warning',
    })
    return
  }
  if (addEmployeeTemp.value.name===''){
    ElMessage({
      message: '姓名不能为空',
      type: 'warning',
    })
  }
  if (addEmployeeTemp.value.name===''){
    ElMessage({
      message: '联系方式不能为空',
      type: 'warning',
    })
  }

  request.post("/store/update/employee",employeeTemp.value).then(res=>{
    request.get("/store/get/employee/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
      employeeList.value=res.data.sort(function (a, b) {
        return a.auth-b.auth
      })
      isEdit.value=false
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    })
  })
}
const showDel=(data)=>{
  ElMessageBox.confirm(
      '确定移除此员工吗？',
      {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }
  )
      .then(() => {
        request.post("/store/del/employee",data).then(res=>{
          request.get("/store/get/employee/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
            employeeList.value=res.data.sort(function (a, b) {
              return a.auth-b.auth
            })
            isEdit.value=false
            ElMessage({
              message: '移除成功',
              type: 'success',
            })
          })
        })
      })
}
const addEmployee = () => {
  addEmployeeTemp.value.id=(new Date().getTime()/1000).toString().substring(-1,9)
  addEmployeeTemp.value.password=addEmployeeTemp.value.tel.substring(addEmployeeTemp.value.tel.length-6)
  addEmployeeTemp.value.storeId=store.getLocalCurrentStoreMain().storeId
  request.post("/store/add/employee",addEmployeeTemp.value).then(res=>{
    showIdAndPwd.value=true
    isAdd.value=false
    request.get("/store/get/employee/"+store.getLocalCurrentStoreMain().storeId).then(res=>{
      employeeList.value=res.data.sort(function (a, b) {
        return a.auth-b.auth
      })
    })
  })
}
const addOK = () => {
  showIdAndPwd.value=false
  addEmployeeTemp.value={}
  addCheckedData.value=[]
}
</script>

<style scoped>

</style>